<!DOCTYPE html>
<html lang="en">
<head>

    <title>Video.js | HTML5 Video Player</title>
    <meta charset="utf-8">
    <link href="./public/video-js.min.css" rel="stylesheet">
    <script src="./public/video.min.js"></script>
    <script src="./public/flash/videojs-flash.min.js"></script>

</head>
<body>
    <video id="videojs" class="video-js vjs-default-skin vjs-big-play-centered" data-setup=""></video>
    <button onclick="play_video('http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8', '')">中央一套</button>
    <button onclick="play_video('http://vjs.zencdn.net/v/oceans.mp4', 'video/mp4')">视频</button>
</body>
<script>
    // 初始化配置
    var options = {
        width: 640,
        height: 400,
        language: 'zh-CN', // 语言

        muted: false, // 是否静音
        preload: 'auto',
        fluid: false, // 是否自适应布局
        loop: true, // 是否循环播放
        poster: './public/logo.svg', // 海报
        playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5, 6, 8], // 播放速率
        controls: true, // 是否显示控制栏
        techOrder: ['html5', 'flash'], // 使用播放器的顺序
        sources: [{
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            type: 'video/mp4'
        }, {
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            type: 'video/mp4'
        }] // 播放列表
    }
    // 初始化设置
    var player = videojs('videojs', options, function () {
        
    });
    // 播放指定视频
    var play_video = function ( src , type = '' ) {
        player.src({
            src: src,
            type: type
        });
        player.play();
    }

</script>
</html>
